<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    Redux 除了和 React 一起用外，还支持其它界面库。redux不仅仅只能在react里面使用，redux是一个数据集中化管理的方案，可以在任何js环境下使用。我们先在web普通开发的情况下了解一下redux的相关的
    api.然后在 react里面集成 redux。

</p>
<p>
    > cnpm install redux
</p>
<div>
    <button id="sub">-</button>
    <i id="content">0</i>
    <button id="add">+</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
<script src="./js/redux.js"></script>
<script type="text/javascript">

    var initState = {
        count: 1,
    }

    var reducer = function (state = initState, action) {

        switch (action.type) {
            case 'add':
                return {count: state.count + 1}
            case 'sub':
                return {count: state.count - 1}
            default:
                return state;
        }

    }

    /**
     // 该方法用于返回最新的仓库数据
     getState: ƒ getState()
     // 用于做仓库数据操作的api 派发任务
     dispatch: ƒ dispatch(action)
     // 订阅仓库的数据，当视图订阅仓库数据后，一旦数据变化，视图可以立马更新使用的（发布者订阅设计模式）
     subscribe: ƒ subscribe(listener)
     */
    var store = Redux.createStore(reducer);

    function render() {
        var count = store.getState().count;
        $("#content").text(count);
    }

    store.subscribe(render); // 订阅仓库的变化，来更新视图

    // 首次执行一下
    render();

    $("#sub").click(function () {
        store.dispatch({type: 'sub'})
        console.log(store.getState().count, 'sub');
    });

    $("#add").click(function () {
        store.dispatch({type: 'add'})
        console.log(store.getState().count, 'add');
    });

</script>
</html>
